<template>
    <div class="topsonglist" v-if="topsonglist.length !== 0" @click="topSongClick" @mouseover="isShowPlay = true" @mouseleave="isShowPlay = false">
        <div class="image">
            <img v-lazy="topsonglist[0].coverImgUrl" alt=""/>
            <transition name="el-fade-in-linear">
                <div class="mask-playicon" v-show="isShowPlay">
					<span class="iconfont icon-play"></span>
				</div>
            </transition>
        </div>
        <div class="info">
            <div class="hd">
                <el-divider content-position="left"><h2>精品歌单</h2></el-divider>
            </div>
            <div class="title">
                {{topsonglist[0].name}}
            </div>
            <div class="desc">
                {{ topsonglist[0].description }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        topsonglist:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data() {
        return {
            isShowPlay:false
        }
    },
    methods:{
        topSongClick(){
            this.$router.push("/songlistdetail/" + this.topsonglist[0].id)
        },
       
    },
    created(){
        
    },
}
</script>
<style lang="less" scoped>
    .topsonglist {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	.image {
		position: relative;
		width: 16%;
		cursor: pointer;
		img {
			width: 100%;
		}
	}
	.info {
		width: 80%;
		.title {
			font-size: 16px;
			padding-bottom: 5px;
		}
		.desc {
			height: 110px;
			font-size: 12px;
			color: #909399;
			overflow-y: scroll;
		}
	}
}

</style>